{extend name='base' /}

{block name='main'}
<style>

    .tree a {
        text-decoration: none;
        color: #2C8DFB;
    }

    .tree ul li {
        list-style-type: none;
        /*margin-left: -10px;*/
        position: relative;
    }

    .tree input{cursor: pointer;}
    .tree span {
        font-size: 13px;
        cursor: pointer;
        display: inline-block;
        border: 1px solid #e2e2e2;
        width: 10px;
        line-height: 8px;
        text-align: center;
        height: 10px;
        background-color: whitesmoke;
        position: absolute;
        left: 8px;
        top: 4px;
    }
    .tree ul span{
        left: -16px;
    }
    .tree ul {
        width: 100%;
        list-style-type: none;
        margin-top: 0px;
        position: relative;
    }
    .tree .label:hover{
        box-shadow: 0 0 4px 0px #a0aefb;
    }
    .tree .label{
        width: 18px;
        height: 18px;
        position: inherit;
        top: 4px;
        background-image: url(__IMG__/leg-tree/check.png);
        background-size: 100% 100%;
        display: inline-block;
        margin: 1px 5px 0 0;
    }
    .tree input:checked + label {
        width: 19px;
        height: 19px;
        margin: 0 4px 0 0;
        background-image: url(__IMG__/leg-tree/checked.png);
    }
    .tree input{
        display: none;
    }
    .tree .isShow{
        width: 14px;
        margin-right: 5px;
    }
</style>
<div class="main-panel">
    <div class="content">
        <div class="page-inner">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">添加分组</h4>
                        </div>
                        <div class="card-body">
                            <form id="form">
                                <div class="form-group form-inline">
                                    <label for="title" class="col-md-2 col-form-label">分组名称 <span style="color: #f00;">*</span></label>
                                    <div class="col-md-10 p-0">
                                        <input type="text" class="form-control" id="title" name="data[title]" placeholder="请输入分组名称" value="{$group.title}">
                                    </div>
                                </div>

                                <div class="form-group form-inline form-check">
                                    <label for="title" class="col-md-2 col-form-label"></label>
                                    <div class="col-md-10 p-0" style="display: flex;flex-direction: column;align-items: flex-start;">
                                        <div class="tree"></div>
                                    </div>
                                </div>

                                <div class="form-group form-inline">
                                    <label class="col-md-2 col-form-label"></label>
                                    <div class="col-md-10 p-0">
                                        <button type="button" class="btn btn-success" onclick="add();">立即提交</button>
                                        <button type="button" class="btn btn-danger" onclick="window.history.back()">返回</button>
                                    </div>
                                </div>
                                <input type="hidden" name="data[rules]" id="rules" value="{$group.rules}">
                                <input type="hidden" name="id" value="{$group.id}">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name='js'}
<script src="__JS__/plugin/leg-tree/leg-tree.js"></script>
<script>
    var lock = false
    function add() {
        if (lock) {
            return false;
        }
        lock = true;
        $("#rules").val($.getCheckedNodes().join(','));
        $.ajax({
            url: "{:url('group/edit')}",
            type: 'post',
            data: $("#form").serialize(),
            dataType: 'json',
            success: function (res) {
                if (res.code == 0) {
                    swal("提示", res.msg, {
                        icon : "error",
                        buttons: {
                            confirm: {
                                className : 'btn btn-danger'
                            }
                        },
                    });
                    lock = false;
                }else{
                    window.history.back();
                }
            }
        })
    }
    var atts = '<?php echo $group["rules"]?>'.split(',');
    $(".tree").tree(<?php echo $rules;?>, atts);
</script>
{/block}